<template>
  <div class="item">
    <van-row gutter="5" class="van-ellipsis">
      <van-col class="name van-ellipsis" >姓名:{{shoper.franchisee_name}}</van-col>
      <van-col class="title van-ellipsis" >上级:{{shoper.manager.nickname}}</van-col>
    </van-row>
    <van-row class="m-top">
      <van-col class="phone van-ellipsis">
        电话: {{shoper.mobile}}
      </van-col>
    </van-row>
    <van-row type="flex" justify="space-around" class="m-top">
      <van-col v-hasRole="['operator']" span="11">
        <van-button class="grey w-100" @click="task" plain hairline>发布任务</van-button>
      </van-col>
      <van-col span="11">
        <van-button class="grey w-100" @click="detail" plain hairline>查看详情</van-button>
      </van-col>
    </van-row>
    <task :show_add.sync="show_task" :shoper_id="shoper.shoper_id"  />
  </div>
</template>

<script>
  import task from './task.vue'
  export default {
    name: "item",
    components: {
      task,
    },
    props: {
      shoper: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        show_task : false,
      }
    },
    methods: {
      detail() {
        this.$router.push({
          path: "/detail",
          query: {
            shoper_id: this.shoper.id,
          }
        });
      },
      task() {
        // TODO:
        this.show_task = true;
      }
    },
  }
</script>

<style lang="less" scoped>
  .item {
    height: 168px;
    width: 320px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 16px;
    padding: 16px 6px 4px 6px;

    .name {
      height: 33px;
      width: 180px;
      color: rgba(51, 51, 51, 1);
      font-size: 22px;
    }

    .phone {
      height: 33px;
      width: 280px;
      color: rgba(51, 51, 51, 1);
      font-size: 22px;
    }

    .title {
      height: 24px;
      line-height: 24px;
      width: 120px;
      color: rgba(102, 102, 102, 1);
      font-size: 14px;
    }

  }
</style>